<template>
    <div class="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
        <!-- 优化后的订单价格预测卡片 -->
        <section class="mb-20">
            <div
                class="bg-gradient-to-r from-blue-100 to-indigo-100 border-b border-blue-200 shadow-sm rounded-2xl overflow-hidden">
                <div class="container mx-auto px-6 py-8">
                    <div class="bg-white rounded-xl shadow-xl p-6">
                        <div class="card-header mb-6">
                            <div class="flex items-center justify-between">
                                <div class="title-section">
                                    <i class="el-icon-data-analysis text-blue-600 text-xl mr-2"></i>
                                    <h3
                                        class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">
                                        订单价格预测
                                    </h3>
                                </div>
                                <el-tooltip content="根据订单标题预测价格" placement="top">
                                    <i class="el-icon-info text-gray-400 cursor-pointer"></i>
                                </el-tooltip>
                            </div>
                        </div>

                        <el-form label-width="100px" size="small" class="prediction-form" label-position="top">
                            <el-form-item label="订单标题" class="form-item-enhanced">
                                <el-input v-model="predictionForm.title" placeholder="请输入订单标题" clearable
                                    @keyup.enter.native="predictPrice">
                                    <template #prefix>
                                        <i class="el-icon-edit"></i>
                                    </template>
                                </el-input>
                            </el-form-item>

                            <el-form-item class="action-item">
                                <el-button type="primary" icon="el-icon-magic-stick" @click="predictPrice"
                                    :loading="isPredicting" class="predict-btn w-full">
                                    {{ isPredicting ? '预测中...' : '预测价格' }}
                                </el-button>
                            </el-form-item>
                        </el-form>

                        <transition name="el-zoom-in-top">
                            <div v-if="predictedPrice !== null" class="result-container mt-6">
                                <div class="result-label">预测结果</div>
                                <div class="price-display">
                                    <span class="price-value">{{ predictedPrice }}</span>
                                    <span class="price-unit">元</span>
                                </div>
                                <div class="result-footer">
                                    <i class="el-icon-time"></i>
                                    <span>更新于: {{ new Date().toLocaleTimeString() }}</span>
                                </div>
                            </div>
                        </transition>
                    </div>
                </div>
            </div>
        </section>

        <!-- 公告轮播区域 -->
        <div class="bg-gradient-to-r from-blue-100 to-indigo-100 border-b border-blue-200 shadow-sm">
            <div class="container mx-auto px-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 py-6">
                    <!-- 公告详情 -->
                    <div
                        class="md:col-span-2 bg-white rounded-xl shadow-xl p-8 transform transition-all duration-300 hover:shadow-2xl">
                        <div class="h-full flex flex-col">
                            <div class="flex items-center justify-between mb-6">
                                <h3
                                    class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">
                                    平台公告
                                </h3>
                                <div class="text-sm text-blue-600 bg-blue-50 px-3 py-1 rounded-full">
                                    <i class="fas fa-bullhorn mr-2"></i>
                                    共 {{ announcements.length }} 条公告
                                </div>
                            </div>
                            <div
                                class="flex-1 overflow-hidden relative bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-6">
                                <div class="bg-white rounded-xl shadow-sm p-6">
                                    <swiper ref="announcementSwiper" :options="announcementSwiperOptions" class="mb-4"
                                        @slideChange="onAnnouncementSlideChange">
                                        <swiper-slide v-for="(item, index) in announcements" :key="index">
                                            <div class="flex items-center justify-between">
                                                <h4 class="text-xl font-semibold text-blue-800">{{ item.title }}</h4>
                                                <div
                                                    class="flex items-center text-gray-500 text-sm bg-gray-50 px-3 py-1 rounded-full">
                                                    <i class="far fa-calendar-alt mr-2"></i>
                                                    <span>{{ item.date }}</span>
                                                </div>
                                            </div>
                                        </swiper-slide>
                                    </swiper>
                                    <div class="announcement-pagination flex justify-center space-x-3 mb-4"></div>
                                    <div v-for="(item, index) in announcements" :key="'content-' + index"
                                        v-show="activeAnnouncementIndex === index">
                                        <div
                                            class="bg-gradient-to-br from-gray-50 to-blue-50 rounded-xl p-4 shadow-inner">
                                            <div class="text-sm font-medium text-blue-600 mb-3 flex items-center">
                                                <i class="fas fa-info-circle mr-2"></i>详细信息：
                                            </div>
                                            <ul class="space-y-3">
                                                <li v-for="(detail, detailIndex) in item.details" :key="detailIndex"
                                                    class="flex items-start bg-white p-3 rounded-lg shadow-xs hover:shadow-sm transition-shadow">
                                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                                    <span class="text-gray-700">{{ detail }}</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 公告列表 -->
                    <div
                        class="bg-white rounded-xl shadow-xl p-8 transform transition-all duration-300 hover:shadow-2xl">
                        <div class="h-full flex flex-col">
                            <div class="flex items-center justify-between mb-6">
                                <h3
                                    class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">
                                    最新公告
                                </h3>
                                <div class="text-sm text-blue-600 bg-blue-50 px-3 py-1 rounded-full">
                                    <i class="fas fa-clock mr-2"></i>
                                    实时更新
                                </div>
                            </div>
                            <div class="flex-1 overflow-hidden relative">
                                <div class="h-full space-y-4">
                                    <div v-for="(item, index) in announcements" :key="'list-' + index"
                                        v-if="index >= (currentPage - 1) * 5 && index < currentPage * 5"
                                        class="p-4 rounded-xl cursor-pointer transform transition-all duration-300 hover:scale-[1.02] group"
                                        :class="{
                                            'bg-gradient-to-r from-blue-100 to-indigo-100 shadow-md border-l-4 border-blue-500': activeAnnouncementIndex === index,
                                            'hover:bg-gray-50 border border-gray-100': activeAnnouncementIndex !== index
                                        }" @click="activeAnnouncementIndex = index; $refs.announcementSwiper.swiper.slideTo(index)">
                                        <div class="flex items-center justify-between">
                                            <div class="flex-1">
                                                <div class="flex items-center space-x-2">
                                                    <div class="text-base font-medium transition-colors" :class="{
                                                        'text-blue-600': activeAnnouncementIndex === index,
                                                        'text-gray-800 group-hover:text-blue-600': activeAnnouncementIndex !== index
                                                    }">{{ item.title }}</div>
                                                    <span v-if="index === 0"
                                                        class="px-2 py-0.5 bg-gradient-to-r from-red-100 to-pink-100 text-red-600 text-xs rounded-full animate-pulse">New</span>
                                                </div>
                                                <div class="flex items-center mt-2 text-sm text-gray-500">
                                                    <i class="far fa-calendar-alt mr-2"></i>
                                                    <span>{{ item.date }}</span>
                                                    <span class="mx-2">·</span>
                                                    <span class="text-blue-500">
                                                        <i class="far fa-eye mr-1"></i>
                                                        {{ Math.floor(Math.random() * 1000) + 100 }}
                                                    </span>
                                                </div>
                                            </div>
                                            <i
                                                class="fas fa-chevron-right text-blue-400 transform transition-transform group-hover:translate-x-2"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex justify-center mt-6">
                                    <div class="inline-flex rounded-xl shadow-sm bg-gray-50 p-1">
                                        <button v-for="page in totalPages" :key="'page-' + page"
                                            class="!rounded-xl whitespace-nowrap px-4 py-2 text-sm font-medium transition-all duration-200"
                                            :class="{
                                                'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-md': currentPage === page,
                                                'bg-white text-gray-700 hover:bg-gray-100 border border-gray-200': currentPage !== page
                                            }" @click="currentPage = page">
                                            {{ page }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要内容 -->
        <main class="container mx-auto px-6 pt-8 pb-16">
            <!-- 轮播图区域 -->
            <section class="mb-20">
                <div class="relative h-96 rounded-2xl overflow-hidden shadow-2xl">
                    <div class="absolute inset-0 bg-gradient-to-r from-blue-900 to-indigo-900 opacity-90"></div>
                    <div class="relative h-full flex items-center">
                        <div class="w-full md:w-1/2 px-10 text-white">
                            <h1 class="text-4xl font-bold mb-4 animate-fade-in-down">约瑟技术抢单平台</h1>
                            <p class="text-xl mb-6 text-blue-100">毫秒级响应，稳定可靠的 API 接口，助力您的业务飞速发展</p>
                            <button @click="goToOrdersPage"
                                class="!rounded-xl whitespace-nowrap bg-white text-blue-600 hover:bg-blue-100 px-6 py-3 text-lg font-medium shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-xl">
                                立即体验 <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                        <div class="hidden md:block w-1/2 h-full">
                            <img src="https://ai-public.mastergo.com/ai/img_res/8d74d058f8fe8b7735d656103599c540.jpg"
                                alt="技术平台" class="w-full h-full object-cover">
                        </div>
                    </div>
                </div>
            </section>

            <!-- 核心功能区（修改为五个链接） -->
            <section class="mb-20">
                <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">扩展功能</span>
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-5 gap-6">
                    <!-- 链接 1 -->
                    <a href="https://chat.deepseek.com/sign_in" target="_blank"
                        class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl group block">
                        <div
                            class="h-48 bg-gradient-to-br from-blue-100 to-indigo-100 flex items-center justify-center relative overflow-hidden">
                            <div
                                class="absolute inset-0 bg-[url('https://ai-public.mastergo.com/ai/img_res/5541085230d0c189cd098d60a673d6e5.jpg')] bg-cover bg-center opacity-30">
                            </div>
                            <div class="relative z-10 text-center p-6">
                                <div class="w-16 h-16 bg-white flex items-center justify-center mx-auto mb-4">
                                    <img src="https://pic.rmb.bdstatic.com/bjh/news/06e0ae1edef2774a2b187df20b35b105.png"
                                        alt="DeepSeek" class="w-10 h-10 object-contain">
                                </div>
                                <h3 class="text-xl font-bold text-gray-800">DeepSeek</h3>
                            </div>
                        </div>
                    </a>

                    <!-- 链接 2 -->
                    <a href="https://www.doubao.com/chat/" target="_blank"
                        class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl group block">
                        <div
                            class="h-48 bg-gradient-to-br from-green-100 to-teal-100 flex items-center justify-center relative overflow-hidden">
                            <div
                                class="absolute inset-0 bg-[url('https://ai-public.mastergo.com/ai/img_res/79bb51ebc406f6549960744291925498.jpg')] bg-cover bg-center opacity-30">
                            </div>
                            <div class="relative z-10 text-center p-6">
                                <div class="w-16 h-16 bg-white flex items-center justify-center mx-auto mb-4">
                                    <img src="https://img.qiluyidian.net/1730963759557821rkfyz46kimage.jpeg?imageView2/2/w/960"
                                        alt="Doubao" class="w-10 h-10 object-contain">
                                </div>
                                <h3 class="text-xl font-bold text-gray-800">Doubao</h3>
                            </div>
                        </div>
                    </a>

                    <!-- 链接 3 -->
                    <a href="https://pc.molica.com.cn/chat" target="_blank"
                        class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl group block">
                        <div
                            class="h-48 bg-gradient-to-br from-purple-100 to-pink-100 flex items-center justify-center relative overflow-hidden">
                            <div
                                class="absolute inset-0 bg-[url('https://ai-public.mastergo.com/ai/img_res/297d9fa1fcb0c950f44ef90de0a0f65b.jpg')] bg-cover bg-center opacity-30">
                            </div>
                            <div class="relative z-10 text-center p-6">
                                <div class="w-16 h-16 bg-white flex items-center justify-center mx-auto mb-4">
                                    <img src="https://qcloud.dpfile.com/pc/Mac14itJYXFQVCweBlqBAD3iB7-LVXse2BEKZFqsgI3PiciHswFYVulDuj-3DiqZ.jpg"
                                        alt="Molica" class="w-10 h-10 object-contain">
                                </div>
                                <h3 class="text-xl font-bold text-gray-800">Molica</h3>
                            </div>
                        </div>
                    </a>

                    <!-- 链接 4 -->
                    <a href="https://www.kimi.com/" target="_blank"
                        class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl group block">
                        <div
                            class="h-48 bg-gradient-to-br from-yellow-100 to-orange-100 flex items-center justify-center relative overflow-hidden">
                            <div
                                class="absolute inset-0 bg-[url('https://ai-public.mastergo.com/ai/img_res/8d74d058f8fe8b7735d656103599c540.jpg')] bg-cover bg-center opacity-30">
                            </div>
                            <div class="relative z-10 text-center p-6">
                                <div class="w-16 h-16 bg-white flex items-center justify-center mx-auto mb-4">
                                    <img src="https://img.onlinedown.net/download/202403/165003-66028c3b53ae6.jpg"
                                        alt="Kimi" class="w-10 h-10 object-contain">
                                </div>
                                <h3 class="text-xl font-bold text-gray-800">Kimi</h3>
                            </div>
                        </div>
                    </a>

                    <!-- 链接 5 -->
                    <a href="https://www.tongyi.com/qianwen" target="_blank"
                        class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl group block">
                        <div
                            class="h-48 bg-gradient-to-br from-red-100 to-pink-100 flex items-center justify-center relative overflow-hidden">
                            <div
                                class="absolute inset-0 bg-[url('https://ai-public.mastergo.com/ai/img_res/7cb4e4e7d38482a77a3d74deb40bdae9.jpg')] bg-cover bg-center opacity-30">
                            </div>
                            <div class="relative z-10 text-center p-6">
                                <div class="w-16 h-16 bg-white flex items-center justify-center mx-auto mb-4">
                                    <img src="https://gips3.baidu.com/it/u=2148850314,2068086696&fm=3074&app=3074&f=JPEG?w=1436&h=1124&type=normal&func=T"
                                        alt="Qwen" class="w-10 h-10 object-contain">
                                </div>
                                <h3 class="text-xl font-bold text-gray-800">Qwen</h3>
                            </div>
                        </div>
                    </a>
                </div>
            </section>

            <!-- 平台数据统计卡片 -->
            <el-row :gutter="40" class="panel-group" v-if="chartPermissions.showAllStats">
                <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
                    <div class="card-panel">
                        <div class="card-panel-icon-wrapper icon-people">
                            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
                        </div>
                        <div class="card-panel-description">
                            <div class="card-panel-text">
                                技术员总数
                            </div>
                            <count-to :start-val="0" :end-val="totalTechnicians" :duration="2600"
                                class="card-panel-num" />
                        </div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
                    <div class="card-panel">
                        <div class="card-panel-icon-wrapper icon-message">
                            <svg-icon icon-class="message" class-name="card-panel-icon" />
                        </div>
                        <div class="card-panel-description">
                            <div class="card-panel-text">
                                订单投诉率
                            </div>
                            <count-to :start-val="0" :end-val="complaintRate" :duration="3000" :decimals="2" suffix="%"
                                class="card-panel-num" />
                        </div>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col">
                    <div class="card-panel">
                        <div class="card-panel-icon-wrapper icon-money">
                            <svg-icon icon-class="money" class-name="card-panel-icon" />
                        </div>
                        <div class="card-panel-description">
                            <div class="card-panel-text">
                                平台总单量
                            </div>
                            <count-to :start-val="0" :end-val="totalOrders" :duration="3200" class="card-panel-num" />
                        </div>
                    </div>
                </el-col>
            </el-row>

            <!-- ECharts 图表 -->
            <section class="mb-20">
                <div
                    class="bg-gradient-to-r from-blue-100 to-indigo-100 border-b border-blue-200 shadow-sm rounded-2xl overflow-hidden">
                    <div class="container mx-auto px-6 py-8">
                        <div class="bg-white rounded-xl shadow-xl p-6">
                            <div
                                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                                <div style="display: flex; align-items: center;">
                                    <h3
                                        class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">
                                        订单量趋势
                                    </h3>
                                    <el-switch v-if="isManager" v-model="showMyOrders" active-text="我的订单"
                                        inactive-text="全部订单" @change="handleOrderViewChange"
                                        style="margin-left: 20px;"></el-switch>
                                </div>
                                <el-date-picker v-model="dateRange" type="daterange" @change="handleDateChange"
                                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd" size="small">
                                </el-date-picker>
                            </div>
                            <div ref="lineChart" style="height: 400px; width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- TEST COMMENT -->



            <!-- 角色组订单统计图表 -->
            <section class="mb-20" v-if="chartPermissions.showRoleGroupChart">
                <div
                    class="bg-gradient-to-r from-blue-100 to-indigo-100 border-b border-blue-200 shadow-sm rounded-2xl overflow-hidden">
                    <div class="container mx-auto px-6 py-8">
                        <div class="bg-white rounded-xl shadow-xl p-6">
                            <div
                                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                                <h3
                                    class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">
                                    用户订单统计
                                </h3>
                                <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">
                                    <!-- 姓名关键词筛选 -->
                                    <el-input v-model="userOrderQuery.userName" placeholder="请输入姓名"
                                        @input="handleUserOrderNameKeywordChange" clearable style="width: 150px;"
                                        size="small">
                                        <template #prefix>
                                            <i class="el-icon-search"></i>
                                        </template>
                                    </el-input>
                                    <!-- 角色筛选 -->
                                    <el-select v-model="userOrderQuery.roleName" placeholder="请选择角色"
                                        @change="handleUserOrderRoleChange" clearable style="width: 120px;" size="small">
                                        <el-option label="售前" value="售前"></el-option>
                                        <el-option label="售中" value="售中"></el-option>
                                        <el-option label="售后" value="售后"></el-option>
                                    </el-select>
                                    <!-- 时间筛选 -->
                                    <el-date-picker v-model="userOrderDateRange" type="daterange"
                                        @change="handleUserOrderDateChange" range-separator="至"
                                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                                        size="small">
                                    </el-date-picker>


                                </div>
                            </div>
                            <div ref="userOrderChart" style="height: 500px; width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 技术人员订单统计图表 -->
            <section class="mb-20" v-if="chartPermissions.showRoleGroupChart">
                <div
                    class="bg-gradient-to-r from-blue-100 to-indigo-100 border-b border-blue-200 shadow-sm rounded-2xl overflow-hidden">
                    <div class="container mx-auto px-6 py-8">
                        <div class="bg-white rounded-xl shadow-xl p-6">
                            <div
                                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                                <h3
                                    class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">
                                    技术人员订单统计
                                </h3>
                                <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">
                                    <!-- 姓名关键词筛选 -->
                                    <el-input v-model="programmerOrderQuery.userName" placeholder="请输入姓名"
                                        @input="handleProgrammerOrderNameKeywordChange" clearable style="width: 150px;"
                                        size="small">
                                        <template #prefix>
                                            <i class="el-icon-search"></i>
                                        </template>
                                    </el-input>
                                    <!-- 技术状态筛选 -->
                                    <el-select v-model="programmerOrderQuery.workStatus" placeholder="请选择技术状态"
                                        @change="handleProgrammerOrderWorkStatusChange" clearable style="width: 150px;" size="small">
                                        <el-option label="内部技术" value="0"></el-option>
                                        <el-option label="外部技术" value="1"></el-option>
                                    </el-select>
                                    <!-- 时间筛选 -->
                                    <el-date-picker v-model="programmerOrderDateRange" type="daterange"
                                        @change="handleProgrammerOrderDateChange" range-separator="至"
                                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                                        size="small">
                                    </el-date-picker>
                                </div>
                            </div>
                            <div ref="programmerOrderChart" style="height: 500px; width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- 关于我们 -->
            <section class="mb-60">
                <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">
                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">关于我们</span>
                </h2>

                <!-- Card Grid -->
                <div v-if="aboutUsList.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <div v-for="item in aboutUsList" :key="item.id" @click="showAboutUsDetails(item)"
                        class="bg-white rounded-2xl shadow-lg overflow-hidden cursor-pointer transform transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl group">

                        <img :src="item.picture" :alt="item.title" class="w-full h-64 object-cover"
                            @error="handleImageError" />
                        <!--              <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>-->
                        <h3
                            class="absolute bottom-0 left-0 p-6 text-2xl font-bold text-white transition-colors duration-300 group-hover:text-blue-300">

                            {{ item.title }}
                        </h3>
                    </div>
                </div>

                <div v-else class="text-center py-12 bg-white rounded-2xl shadow-xl">
                    <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4">
                        <i class="fas fa-info-circle text-2xl text-blue-600"></i>
                    </div>
                    <p class="text-gray-500">暂无关于我们的信息</p>
                </div>

                <!-- Modal -->
                <transition name="fade">
                    <div v-if="isAboutUsModalVisible" @click.self="hideAboutUsDetails"
                        class="fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4">
                        <div v-if="selectedAboutUsItem"
                            class="bg-white rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col overflow-hidden">
                            <div class="p-6 flex-shrink-0 flex justify-between items-center border-b">
                                <h3 class="text-2xl font-bold text-blue-800">{{ selectedAboutUsItem.title }}</h3>
                                <button @click="hideAboutUsDetails"
                                    class="text-gray-400 hover:text-gray-600 transition-colors">
                                    <i class="fas fa-times text-2xl"></i>
                                </button>
                            </div>
                            <div class="p-8 overflow-y-auto">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                    <img :src="selectedAboutUsItem.picture" :alt="selectedAboutUsItem.title"
                                        class="rounded-lg shadow-md w-full h-auto object-cover">
                                    <div class="about-us-content leading-relaxed" v-html="selectedAboutUsItem.content">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </transition>
            </section>

            <!-- 间隔区域 -->
            <div class="mb-20"></div>

        </main>

        <!-- 页脚 -->
        <footer class="bg-gray-900 text-gray-400 py-12">
            <div class="container mx-auto px-6">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <div>
                        <div class="flex items-center mb-4">
                            <img src="@/assets/images/约瑟LOGO.png" alt="约瑟科技" class="w-10 h-10 object-contain">
                            <span class="ml-3 text-white font-bold text-xl">约瑟科技</span>
                        </div>
                        <p class="mb-4 text-gray-500">让技术更简单</p>
                    </div>
                    <div>
                        <h3 class="text-white font-semibold text-lg mb-4">公司信息</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="hover:text-white transition-colors">关于我们</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">发展历程</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">技术团队</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">加入我们</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-white font-semibold text-lg mb-4">开发者支持</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="hover:text-white transition-colors">API文档</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">常见问题</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">开发者指南</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">SDK下载</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-white font-semibold text-lg mb-4">商务合作</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="hover:text-white transition-colors">企业合作</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">渠道加盟</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">广告投放</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">媒体合作</a></li>
                        </ul>
                    </div>
                </div>
                <div class="border-t border-gray-800 pt-8 mt-8">
                    <div class="flex flex-col md:flex-row justify-between items-center">
                        <p class="text-gray-500">© 2025 约瑟科技 版权所有</p>
                        <div class="flex space-x-6 mt-4 md:mt-0">
                            <a href="#" class="hover:text-white transition-colors">隐私政策</a>
                            <a href="#" class="hover:text-white transition-colors">服务条款</a>
                            <a href="#" class="hover:text-white transition-colors">法律声明</a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import CountTo from 'vue-count-to'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import { listNotice } from "@/api/system/notice"
import { listOrders } from '@/api/dashboard/orders'
import { listComplaint } from '@/api/quick/complaint'
import { listUsersByRoleName } from '@/api/system/user'
import { listUs } from "@/api/system/us";
import { lissyttOrders, proactively } from "@/api/system/complaint";
import { getOrderDataByUser, getOrderDataByProgrammer } from "@/api/manager/orders"; // 新增：导入用户订单统计API
import { predictOldOrderPrice } from '@/api/dashboard/orders'; // 新增：导入预测价格API

export default {
    name: "Index",
    components: {
        CountTo,
        Swiper,
        SwiperSlide
    },
    data() {
        return {
            currentPage: 1,
            activeAnnouncementIndex: 0,
            announcements: [],
            aboutUsList: [],
            isAboutUsModalVisible: false,
            selectedAboutUsItem: null,
            announcementSwiperOptions: {
                slidesPerView: 1,
                spaceBetween: 30,
                loop: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false
                },
                pagination: {
                    el: '.announcement-pagination',
                    clickable: true,
                    bulletClass: 'swiper-pagination-bullet',
                    bulletActiveClass: 'swiper-pagination-bullet-active'
                },
                observer: true,
                observeParents: true
            },
            totalOrders: 0,
            complaintRate: 0,
            totalTechnicians: 0,
            lineChart: null,
            pieChart: null,
            dateRange: [],
            allOrders: [],
            chartPermissions: {
                showOrderTrend: false,
                showAmountDistribution: false,
                showAllStats: false,
                showRoleGroupChart: false // 新增：控制角色组订单统计图表的权限
            },
            showMyOrders: false,
            isManager: false,
            // 用户订单统计图表相关数据
            userOrderChart: null, // ECharts 实例
            userOrderData: [], // 用户订单统计数据
            userOrderQuery: {
                userName: '', // 姓名关键词
                roleName: '', // 角色筛选
                pageNum: 1,
                pageSize: 100, // 获取更多数据用于图表展示
                params: {} // 用于日期筛选
            },
            userOrderDateRange: [], // 时间筛选范围
            predictionForm: {
                title: '',
                sqnbbz: '',
                sznbbz: ''
            },
            predictedPrice: null,
            isPredicting: false,
            userOrderNameKeywordTimer: null, // 用户订单姓名关键词防抖定时器
            // 技术人员订单统计图表相关数据
            programmerOrderChart: null, // ECharts 实例
            programmerOrderData: [], // 技术人员订单统计数据
            programmerOrderQuery: {
                userName: '', // 姓名关键词
                workStatus: '1', // 技术状态筛选 (0=内部技术, 1=外部技术) - 默认为外部技术
                pageNum: 1,
                pageSize: 100,
                params: {} // 用于日期筛选
            },
            programmerOrderDateRange: [], // 时间筛选范围
            programmerOrderNameKeywordTimer: null // 技术人员订单姓名关键词防抖定时器
        }
    },
    computed: {
        totalPages() {
            return Math.ceil(this.announcements.length / 5)
        }
    },
    created() {
        this.getAnnouncementList()
        this.getAboutUsInfo()
        this.setDefaultDateRange()
        this.getproactively()
        this.getPlatformStats()
        // 初始化用户订单统计图表
        this.$nextTick(() => {
            this.setDefaultUserOrderDateRange();
            this.getUserOrderData();
            // 初始化技术人员订单统计图表
            this.setDefaultProgrammerOrderDateRange();
            this.getProgrammerOrderData();
        });
    },
    methods: {

        getproactively() {
            const userid = this.$store.state.user.id;
            proactively(userid)
                .then(response => {
                    const roleNames = response.data.userRoles;
                    // 检查是否是主管或管理员
                    this.isManager = roleNames.some(role => role.includes('主管') || role === '超级管理员');
                    // 根据角色设置图表权限
                    this.chartPermissions.showRoleGroupChart = roleNames.some(role =>
                        role.includes('售前') || role.includes('售中') || role.includes('售后') || role === '超级管理员'
                    ); 

                    // 获取用户订单统计数据
                    if (this.chartPermissions.showRoleGroupChart) {
                        this.getUserOrderData();
                    }
                })
                .catch(error => {
                    console.error("请求失败:", error);
                });
        },

        handleOrderViewChange() {
            this.getPlatformStats(this.showMyOrders ? 'my' : 'all');
        },

        getPlatformStats(type) {
            const userid = this.$store.state.user.id;
            let complaintParams = { pageNum: 1, pageSize: 1, userid };
            let orderParams = { pageNum: 1, pageSize: 9999, userid };

            if (type === 'my') {
                // 添加查询个人订单的参数
                orderParams.showMyOrders = true;
            }

            lissyttOrders(complaintParams).then(complaintsRes => {
                return lissyttOrders(orderParams).then(ordersRes => {
                    this.totalOrders = ordersRes.total;
                    this.allOrders = ordersRes.rows;
                    const totalComplaints = complaintsRes.total;
                    if (this.totalOrders > 0) {
                        this.complaintRate = (totalComplaints / this.totalOrders) * 100;
                    } else {
                        this.complaintRate = 0;
                    }
                    this.totalTechnicians = 0;
                    this.$nextTick(() => {
                        this.initLineChart(this.allOrders);
                        this.initPieChart(this.allOrders);
                    });
                });
            }).catch(error => {
                console.error('获取平台统计数据失败:', error);
                this.$modal.msgError('获取平台统计数据失败: ' + (error.message));
            });
        },
        beforeDestroy() {
            if (this.lineChart) {
                this.lineChart.dispose()
            }
            if (this.pieChart) {
                this.pieChart.dispose()
            }
            if (this.userOrderChart) {
                this.userOrderChart.dispose();
            }
            if (this.programmerOrderChart) {
                this.programmerOrderChart.dispose();
            }
            // 清理防抖定时器
            if (this.userOrderNameKeywordTimer) {
                clearTimeout(this.userOrderNameKeywordTimer);
            }
            if (this.programmerOrderNameKeywordTimer) {
                clearTimeout(this.programmerOrderNameKeywordTimer);
            }
        },
        getAnnouncementList() {
            listNotice({ pageNum: 1, pageSize: 8, status: '0' }).then(response => {
                const announcementData = response.rows.map(item => {
                    const strippedContent = item.noticeContent.replace(/<[^>]*>/g, '')
                    return {
                        title: item.noticeTitle,
                        date: this.parseTime(item.createTime, '{y}-{m}-{d}'),
                        content: strippedContent,
                        details: [
                            `公告类型: ${item.noticeType === '1' ? '通知' : '公告'}`,
                            `内容摘要: ${strippedContent.substring(0, 500)}`
                        ]
                    }
                })
                this.announcements = announcementData
            })
        },
        getAboutUsInfo() {
            listUs({ pageNum: 1, pageSize: 100 }).then(response => {
                this.aboutUsList = response.rows.map(item => ({
                    ...item,
                    picture: item.picture || 'https://via.placeholder.com/800x600?text=Default+Image'
                }))
            })
        },
        handleImageError(e) {
            // e.target.src = 'https://via.placeholder.com/800x600?text=Image+Not+Available'
        },
        onAnnouncementSlideChange(swiper) {
            this.activeAnnouncementIndex = swiper.realIndex
            this.currentPage = Math.floor(swiper.realIndex / 5) + 1
        },
        showAboutUsDetails(item) {
            this.selectedAboutUsItem = item;
            this.isAboutUsModalVisible = true;
        },
        hideAboutUsDetails() {
            this.isAboutUsModalVisible = false;
        },
        setDefaultDateRange() {
            const end = new Date();
            const start = new Date(end.getFullYear(), end.getMonth(), 1);
            this.dateRange = [start, end];
        },
        // 设置用户订单统计的默认时间范围
        setDefaultUserOrderDateRange() {
            const end = new Date();
            const start = new Date(end.getFullYear(), end.getMonth(), 1);
            this.userOrderDateRange = [this.parseTime(start, '{y}-{m}-{d}'), this.parseTime(end, '{y}-{m}-{d}')];
            // 初始化查询参数
            this.userOrderQuery.params = {
                startTime: this.parseTime(start, '{y}-{m}-{d}'),
                endTime: this.parseTime(end, '{y}-{m}-{d}')
            };
        },
        handleDateChange() {
            this.initLineChart(this.allOrders);
        },
        initLineChart(orders) {
            const chartData = this.prepareLineChartData(orders);
            const chartDom = this.$refs.lineChart;
            if (!chartDom) return;
            if (this.lineChart) {
                this.lineChart.dispose()
            }
            this.lineChart = echarts.init(chartDom);
            this.lineChart.setOption({
                title: {
                    text: '订单量趋势',
                    textStyle: {
                        fontSize: 18,
                        fontWeight: 'bold',
                        color: '#333'
                    },
                    left: 'center',
                    top: 10
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        let result = params[0].axisValue + '<br/>';
                        params.forEach(param => {
                            const color = param.color;
                            const status = param.seriesName;
                            const value = param.value;
                            result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;
                            result += `${status}: ${value}单<br/>`;
                        });
                        return result;
                    }
                },
                legend: {
                    data: ['待抢单', '重包单', '内技术进行中', '外技术包单中', '已退单', '已完成'],
                    top: 50
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '100px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: chartData.xData,
                    boundaryGap: false
                },
                yAxis: {
                    type: 'value',
                    name: '订单数量'
                },
                series: [
                    {
                        name: '待抢单',
                        type: 'line',
                        smooth: true,
                        data: chartData.statusData['待抢单'],
                        itemStyle: { color: '#409EFF' }
                    },
                    {
                        name: '重包单',
                        type: 'line',
                        smooth: true,
                        data: chartData.statusData['重包单'],
                        itemStyle: { color: 'rgba(180,44,19,0.8)' }
                    },
                    {
                        name: '内技术进行中',
                        type: 'line',
                        smooth: true,
                        data: chartData.statusData['内技术进行中'],
                        itemStyle: { color: '#E6A23C' }
                    },
                    {
                        name: '外技术包单中',
                        type: 'line',
                        smooth: true,
                        data: chartData.statusData['外技术包单中'],
                        itemStyle: { color: '#F56C6C' }
                    },
                    {
                        name: '已退单',
                        type: 'line',
                        smooth: true,
                        data: chartData.statusData['已退单'],
                        itemStyle: { color: '#909399' }
                    },
                    {
                        name: '已完成',
                        type: 'line',
                        smooth: true,
                        data: chartData.statusData['已完成'],
                        itemStyle: { color: '#67C23A' }
                    }
                ]
            });
        },
        prepareLineChartData(orders) {
            if (!orders || !this.dateRange || this.dateRange.length !== 2) {
                return {
                    xData: [],
                    statusData: {
                        '待抢单': [],
                        '重包单': [],
                        '内技术进行中': [],
                        '外技术包单中': [],
                        '已退单': [],
                        '已完成': []
                    }
                };
            }

            const statusMap = {
                '0': '待抢单',
                '1': '重包单',
                '2': '内技术进行中',
                '3': '外技术包单中',
                '4': '已退单',
                '5': '已完成'
            };

            const startDate = new Date(this.dateRange[0]);
            startDate.setHours(0, 0, 0, 0);
            const endDate = new Date(this.dateRange[1]);
            endDate.setHours(23, 59, 59, 999);

            // 初始化日期和状态数据
            const dateMap = {};
            let currentDate = new Date(startDate);
            while (currentDate <= endDate) {
                const dateString = `${currentDate.getMonth() + 1}-${currentDate.getDate()}`;
                dateMap[dateString] = {
                    '待抢单': 0,
                    '重包单': 0,
                    '内技术进行中': 0,
                    '外技术包单中': 0,
                    '已退单': 0,
                    '已完成': 0
                };
                currentDate.setDate(currentDate.getDate() + 1);
            }

            // 统计每个日期每个状态的订单数量
            orders.forEach(order => {
                const orderDate = new Date(order.createTime);
                if (orderDate >= startDate && orderDate <= endDate) {
                    const dateString = `${orderDate.getMonth() + 1}-${orderDate.getDate()}`;
                    const statusName = statusMap[order.orderStatus] || '未知状态';
                    if (dateMap[dateString] && statusName !== '未知状态') {
                        dateMap[dateString][statusName]++;
                    }
                }
            });

            // 转换为图表数据格式
            const xData = Object.keys(dateMap);
            const statusData = {
                '待抢单': [],
                '重包单': [],
                '内技术进行中': [],
                '外技术包单中': [],
                '已退单': [],
                '已完成': []
            };

            xData.forEach(date => {
                Object.keys(statusData).forEach(status => {
                    statusData[status].push(dateMap[date][status]);
                });
            });

            return { xData, statusData };
        },
        initPieChart(orders) {
            if (!orders) return;
            const chartData = this.preparePieChartData(orders);
            const chartDom = this.$refs.pieChart;
            if (!chartDom) return;
            this.pieChart = echarts.init(chartDom);
            this.pieChart.setOption({
                title: { text: '订单状态分布', left: 'center' },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}单 ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    top: 'middle'
                },
                series: [{
                    name: '订单状态',
                    type: 'pie',
                    radius: '50%',
                    data: chartData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            });
        },
        preparePieChartData(orders) {
            if (!orders) return [];
            const statusMap = {
                '0': '待抢单',
                '1': '重包单',
                '2': '内技术进行中',
                '3': '外技术包单中',
                '4': '已退单',
                '5': '已完成'
            };
            const statusCounts = {};

            // 初始化所有状态的计数
            Object.keys(statusMap).forEach(key => {
                statusCounts[statusMap[key]] = 0;
            });

            // 统计每个状态的订单数量
            orders.forEach(order => {
                const statusName = statusMap[order.orderStatus] || '未知状态';
                statusCounts[statusName]++;
            });

            // 转换为图表数据格式
            return Object.entries(statusCounts)
                .map(([name, value]) => ({
                    name,
                    value,
                    itemStyle: {
                        color: this.getStatusColor(name)
                    }
                }))
                .filter(item => item.value > 0); // 只显示有数据的状态
        },
        getStatusColor(status) {
            const colorMap = {
                '待抢单': '#409EFF',
                '重包单': '#67C23A',
                '内技术进行中': '#E6A23C',
                '外技术包单中': '#F56C6C',
                '已退单': '#909399',
                '已完成': '#67C23A',
                '未知状态': '#909399'
            };
            return colorMap[status] || '#909399';
        },
        // 用户订单统计相关方法
        handleUserOrderNameKeywordChange() {
            // 使用防抖，避免频繁请求
            if (this.userOrderNameKeywordTimer) {
                clearTimeout(this.userOrderNameKeywordTimer);
            }
            this.userOrderNameKeywordTimer = setTimeout(() => {
                this.getUserOrderData();
            }, 500); // 500ms 防抖
        },

        handleUserOrderDateChange() {
            // 更新时间参数
            if (this.userOrderDateRange && this.userOrderDateRange.length === 2) {
                this.userOrderQuery.params.startTime = this.userOrderDateRange[0];
                this.userOrderQuery.params.endTime = this.userOrderDateRange[1];
            } else {
                this.userOrderQuery.params.startTime = null;
                this.userOrderQuery.params.endTime = null;
            }
            this.getUserOrderData();
        },

        handleUserOrderRoleChange() {
            // 角色筛选变化时重新获取数据
            this.getUserOrderData();
        },

        getUserOrderData() {
            // 设置查询参数
            const queryParams = {
                pageNum: this.userOrderQuery.pageNum,
                pageSize: this.userOrderQuery.pageSize,
                params: {
                    ...this.userOrderQuery.params,
                    userName: this.userOrderQuery.userName || null,
                    roleName: this.userOrderQuery.roleName || null
                }
            };

            getOrderDataByUser(queryParams).then(response => {
                this.userOrderData = response.rows || [];
                this.initUserOrderChart(this.userOrderData);
            }).catch(error => {
                console.error('获取用户订单统计数据失败:', error);
                // 即使获取数据失败，也初始化图表以显示空状态
                this.initUserOrderChart([]);
                this.$modal.msgError('获取用户订单统计数据失败: ' + (error.message || error.msg));
            });
        },

        initUserOrderChart(userData) {
            // 处理空数据情况
            if (!userData || userData.length === 0) {
                userData = [{
                    userName: '暂无数据',
                    totalOrders: 0,
                    undevelopedCount: 0,
                    developedCount: 0,
                    unexpiredTransferCount: 0,
                    unexpiredTotalPrice: 0,
                    finalDealCount: 0,
                    finalDealPriceDifference: 0,
                    yellowOrderCount: 0,
                    yellowOrderRate: 0,
                    serviceChargeCount: 0,
                    serviceChargeTotalPrice: 0,
                    sendOrdersPriceDifference: 0,
                    transactionPriceDifference: 0
                }];
            }

            const xData = userData.map(item => item.userName); // 用户姓名
            
            // 主管数据中的所有展示字段
            const totalOrdersData = userData.map(item => item.totalOrders || 0); // 总单量
            const undevelopedCountData = userData.map(item => item.undevelopedCount || 0); // 未开发数
            const developedCountData = userData.map(item => item.developedCount || 0); // 已开发数
            const unexpiredTransferCountData = userData.map(item => item.unexpiredTransferCount || 0); // 移交数
            const unexpiredTotalPriceData = userData.map(item => item.unexpiredTotalPrice || 0); // 移交总价
            const finalDealCountData = userData.map(item => item.finalDealCount || 0); // 交付数
            const finalDealPriceData = userData.map(item => item.finalDealPriceDifference || 0); // 交付价
            const yellowOrderCountData = userData.map(item => item.yellowOrderCount || 0); // 黄单数
            const yellowOrderRateData = userData.map(item => (item.yellowOrderRate || 0) * 100); // 黄单率(转换为百分比)
            const serviceChargeCountData = userData.map(item => item.serviceChargeCount || 0); // 服务费数
            const serviceChargePriceData = userData.map(item => item.serviceChargeTotalPrice || 0); // 服务费利润
            const sendOrdersRateData = userData.map(item => (item.sendOrdersPriceDifference || 0) * 100); // 包单率(转换为百分比)
            const transactionRateData = userData.map(item => (item.transactionPriceDifference || 0) * 100); // 成交率(转换为百分比)

            const chartDom = this.$refs.userOrderChart;
            if (!chartDom) return;
            if (this.userOrderChart) {
                this.userOrderChart.dispose();
            }
            this.userOrderChart = echarts.init(chartDom);

            // 判断是否为占位数据
            const isPlaceholderData = userData.length === 1 && userData[0].userName === '暂无数据';

            this.userOrderChart.setOption({
                title: {
                    text: '用户订单统计（完整数据）',
                    textStyle: {
                        fontSize: 18,
                        fontWeight: 'bold',
                        color: '#333'
                    },
                    left: 'center',
                    top: 10
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: isPlaceholderData ? '暂无数据' : function (params) {
                        let result = params[0].name + '<br/>';
                        params.forEach(param => {
                            let value = param.value;
                            // 对于百分比数据，添加%符号
                            if (param.seriesName.includes('率')) {
                                value = value.toFixed(2) + '%';
                            }
                            result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${param.color};"></span>`;
                            result += `${param.seriesName}: ${value}<br/>`;
                        });
                        return result;
                    }
                },
                legend: {
                    data: [
                        '总单量', '未开发数', '已开发数', '移交数', '移交总价', 
                        '交付数', '交付价', '黄单数', '黄单率(%)', 
                        '服务费数', '服务费利润', '包单率(%)', '成交率(%)'
                    ],
                    top: 50,
                    type: 'scroll'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '120px', // 增加顶部间距以适应更多图例
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xData,
                    axisLabel: {
                        color: isPlaceholderData ? '#999' : '#666',
                        rotate: 45, // 旋转标签以适应更多用户名
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '数量/金额/百分比',
                    axisLabel: {
                        color: '#666'
                    }
                },
                series: [
                    {
                        name: '总单量',
                        type: 'bar',
                        data: totalOrdersData,
                        itemStyle: { color: '#409EFF' }
                    },
                    {
                        name: '未开发数',
                        type: 'bar',
                        data: undevelopedCountData,
                        itemStyle: { color: '#FFA500' }
                    },
                    {
                        name: '已开发数',
                        type: 'bar',
                        data: developedCountData,
                        itemStyle: { color: '#67C23A' }
                    },
                    {
                        name: '移交数',
                        type: 'bar',
                        data: unexpiredTransferCountData,
                        itemStyle: { color: '#87CEEB' }
                    },
                    {
                        name: '移交总价',
                        type: 'bar',
                        data: unexpiredTotalPriceData,
                        itemStyle: { color: '#4682B4' }
                    },
                    {
                        name: '交付数',
                        type: 'bar',
                        data: finalDealCountData,
                        itemStyle: { color: '#E6A23C' }
                    },
                    {
                        name: '交付价',
                        type: 'bar',
                        data: finalDealPriceData,
                        itemStyle: { color: '#FF8C00' }
                    },
                    {
                        name: '黄单数',
                        type: 'bar',
                        data: yellowOrderCountData,
                        itemStyle: { color: '#F56C6C' }
                    },
                    {
                        name: '黄单率(%)',
                        type: 'bar',
                        data: yellowOrderRateData,
                        itemStyle: { color: '#DC143C' }
                    },
                    {
                        name: '服务费数',
                        type: 'bar',
                        data: serviceChargeCountData,
                        itemStyle: { color: '#909399' }
                    },
                    {
                        name: '服务费利润',
                        type: 'bar',
                        data: serviceChargePriceData,
                        itemStyle: { color: '#32CD32' }
                    },
                    {
                        name: '包单率(%)',
                        type: 'bar',
                        data: sendOrdersRateData,
                        itemStyle: { color: '#7B68EE' }
                    },
                    {
                        name: '成交率(%)',
                        type: 'bar',
                        data: transactionRateData,
                        itemStyle: { color: '#FF6B6B' }
                    }
                ]
            });
        },
        // 技术人员订单统计相关方法
        setDefaultProgrammerOrderDateRange() {
            const end = new Date();
            const start = new Date(end.getFullYear(), end.getMonth(), 1);
            this.programmerOrderDateRange = [this.parseTime(start, '{y}-{m}-{d}'), this.parseTime(end, '{y}-{m}-{d}')];
            // 初始化查询参数
            this.programmerOrderQuery.params = {
                startTime: this.parseTime(start, '{y}-{m}-{d}'),
                endTime: this.parseTime(end, '{y}-{m}-{d}')
            };
        },

        handleProgrammerOrderNameKeywordChange() {
            // 使用防抖，避免频繁请求
            if (this.programmerOrderNameKeywordTimer) {
                clearTimeout(this.programmerOrderNameKeywordTimer);
            }
            this.programmerOrderNameKeywordTimer = setTimeout(() => {
                this.getProgrammerOrderData();
            }, 500); // 500ms 防抖
        },

        handleProgrammerOrderDateChange() {
            // 更新时间参数
            if (this.programmerOrderDateRange && this.programmerOrderDateRange.length === 2) {
                this.programmerOrderQuery.params.startTime = this.programmerOrderDateRange[0];
                this.programmerOrderQuery.params.endTime = this.programmerOrderDateRange[1];
            } else {
                this.programmerOrderQuery.params.startTime = null;
                this.programmerOrderQuery.params.endTime = null;
            }
            this.getProgrammerOrderData();
        },

        handleProgrammerOrderWorkStatusChange() {
            // 技术状态筛选变化时重新获取数据
            this.getProgrammerOrderData();
        },

        getProgrammerOrderData() {
            // 设置查询参数
            const queryParams = {
                pageNum: this.programmerOrderQuery.pageNum,
                pageSize: this.programmerOrderQuery.pageSize,
                workStatus: this.programmerOrderQuery.workStatus || null,
                params: {
                    ...this.programmerOrderQuery.params,
                    userName: this.programmerOrderQuery.userName || null
                }
            };

            getOrderDataByProgrammer(queryParams).then(response => {
                let data = response.rows || [];
                
                // 如果没有数据，使用默认占位数据
                if (data.length === 0) {
                    data = this.getDefaultProgrammerChartData();
                }
                
                this.programmerOrderData = data;
                this.initProgrammerOrderChart(this.programmerOrderData);
            }).catch(error => {
                console.error('获取技术人员订单统计数据失败:', error);
                // 即使获取数据失败，也显示默认占位数据
                this.programmerOrderData = this.getDefaultProgrammerChartData();
                this.initProgrammerOrderChart(this.programmerOrderData);
                this.$modal.msgError('获取技术人员订单统计数据失败: ' + (error.message || error.msg));
            });
        },

        // 获取默认的技术人员图表占位数据
        getDefaultProgrammerChartData() {
            return [
                {
                    userName: '无数据',
                    roleName: '无数据',
                    totalOrders: 0,
                    notStartedCount: 0,
                    firstDraftCompletedCount: 0,
                    underRevisionCount: 0,
                    undevelopedCount: 0,
                    developedCount: 0,
                    unexpiredTransferCount: 0,
                    unexpiredTotalPrice: 0,
                    finalDealCount: 0,
                    finalDealPriceDifference: 0,
                    yellowOrderCount: 0,
                    yellowOrderRate: 0,
                    serviceChargeCount: 0,
                    serviceChargeTotalPrice: 0,
                    sendOrdersPriceDifference: 0,
                    transactionPriceDifference: 0
                }
            ];
        },

        initProgrammerOrderChart(programmerData) {
            const xData = programmerData.map(item => item.userName); // 技术人员姓名
            
            // 技术人员统计数据
            const totalOrdersData = programmerData.map(item => item.totalOrders || 0); // 总单量
            const notStartedCountData = programmerData.map(item => item.notStartedCount || 0); // 未开始数量
            const firstDraftCompletedCountData = programmerData.map(item => item.firstDraftCompletedCount || 0); // 初稿完成数量
            const underRevisionCountData = programmerData.map(item => item.underRevisionCount || 0); // 修改中数量
            const undevelopedCountData = programmerData.map(item => item.undevelopedCount || 0); // 未开发数
            const developedCountData = programmerData.map(item => item.developedCount || 0); // 已开发数
            const unexpiredTransferCountData = programmerData.map(item => item.unexpiredTransferCount || 0); // 移交数
            const unexpiredTotalPriceData = programmerData.map(item => item.unexpiredTotalPrice || 0); // 移交总价
            const finalDealCountData = programmerData.map(item => item.finalDealCount || 0); // 交付数
            const finalDealPriceData = programmerData.map(item => item.finalDealPriceDifference || 0); // 交付价
            const yellowOrderCountData = programmerData.map(item => item.yellowOrderCount || 0); // 黄单数
            const yellowOrderRateData = programmerData.map(item => (item.yellowOrderRate || 0) * 100); // 黄单率(转换为百分比)
            const serviceChargeCountData = programmerData.map(item => item.serviceChargeCount || 0); // 服务费数
            const serviceChargePriceData = programmerData.map(item => item.serviceChargeTotalPrice || 0); // 服务费利润
            const sendOrdersRateData = programmerData.map(item => (item.sendOrdersPriceDifference || 0) * 100); // 包单率(转换为百分比)
            const transactionRateData = programmerData.map(item => (item.transactionPriceDifference || 0) * 100); // 成交率(转换为百分比)

            const chartDom = this.$refs.programmerOrderChart;
            if (!chartDom) return;
            if (this.programmerOrderChart) {
                this.programmerOrderChart.dispose();
            }
            this.programmerOrderChart = echarts.init(chartDom);

            this.programmerOrderChart.setOption({
                title: {
                    text: '技术人员订单统计（完整数据）',
                    textStyle: {
                        fontSize: 18,
                        fontWeight: 'bold',
                        color: '#333'
                    },
                    left: 'center',
                    top: 10
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        let result = params[0].name + '<br/>';
                        params.forEach(param => {
                            let value = param.value;
                            // 对于百分比数据，添加%符号
                            if (param.seriesName.includes('率')) {
                                value = value.toFixed(2) + '%';
                            }
                            result += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${param.color};"></span>`;
                            result += `${param.seriesName}: ${value}<br/>`;
                        });
                        return result;
                    }
                },
                legend: {
                    data: [
                        '总单量', '未开始数量', '初稿完成数量', '修改中数量', 
                        '未开发数', '已开发数', '移交数', '移交总价', 
                        '交付数', '交付价', '黄单数', '黄单率(%)', 
                        '服务费数', '服务费利润', '包单率(%)', '成交率(%)'
                    ],
                    top: 50,
                    type: 'scroll'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '120px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xData,
                    axisLabel: {
                        color: '#666',
                        rotate: 45,
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '数量/金额/百分比',
                    axisLabel: {
                        color: '#666'
                    }
                },
                series: [
                    {
                        name: '总单量',
                        type: 'bar',
                        data: totalOrdersData,
                        itemStyle: { color: '#409EFF' }
                    },
                    {
                        name: '未开始数量',
                        type: 'bar',
                        data: notStartedCountData,
                        itemStyle: { color: '#909399' }
                    },
                    {
                        name: '初稿完成数量',
                        type: 'bar',
                        data: firstDraftCompletedCountData,
                        itemStyle: { color: '#E6A23C' }
                    },
                    {
                        name: '修改中数量',
                        type: 'bar',
                        data: underRevisionCountData,
                        itemStyle: { color: '#F56C6C' }
                    },
                    {
                        name: '未开发数',
                        type: 'bar',
                        data: undevelopedCountData,
                        itemStyle: { color: '#FFA500' }
                    },
                    {
                        name: '已开发数',
                        type: 'bar',
                        data: developedCountData,
                        itemStyle: { color: '#67C23A' }
                    },
                    {
                        name: '移交数',
                        type: 'bar',
                        data: unexpiredTransferCountData,
                        itemStyle: { color: '#87CEEB' }
                    },
                    {
                        name: '移交总价',
                        type: 'bar',
                        data: unexpiredTotalPriceData,
                        itemStyle: { color: '#4682B4' }
                    },
                    {
                        name: '交付数',
                        type: 'bar',
                        data: finalDealCountData,
                        itemStyle: { color: '#E6A23C' }
                    },
                    {
                        name: '交付价',
                        type: 'bar',
                        data: finalDealPriceData,
                        itemStyle: { color: '#FF8C00' }
                    },
                    {
                        name: '黄单数',
                        type: 'bar',
                        data: yellowOrderCountData,
                        itemStyle: { color: '#F56C6C' }
                    },
                    {
                        name: '黄单率(%)',
                        type: 'bar',
                        data: yellowOrderRateData,
                        itemStyle: { color: '#DC143C' }
                    },
                    {
                        name: '服务费数',
                        type: 'bar',
                        data: serviceChargeCountData,
                        itemStyle: { color: '#909399' }
                    },
                    {
                        name: '服务费利润',
                        type: 'bar',
                        data: serviceChargePriceData,
                        itemStyle: { color: '#32CD32' }
                    },
                    {
                        name: '包单率(%)',
                        type: 'bar',
                        data: sendOrdersRateData,
                        itemStyle: { color: '#7B68EE' }
                    },
                    {
                        name: '成交率(%)',
                        type: 'bar',
                        data: transactionRateData,
                        itemStyle: { color: '#FF6B6B' }
                    }
                ]
            });
        },
        predictPrice() {
            if (!this.predictionForm.title) {
                this.$modal.msgError('请输入订单标题');
                return;
            }
            this.isPredicting = true;
            this.$modal.loading('预测中...');
            predictOldOrderPrice(this.predictionForm).then(response => {
                this.predictedPrice = response.data.predictedPrice;
                this.$modal.msgSuccess('预测成功！');
            }).catch(error => {
                console.error('预测失败:', error);
                this.$modal.msgError('预测失败: ' + (error.message || error.msg));
            }).finally(() => {
                this.isPredicting = false;
                this.$modal.closeLoading();
            });
        },
        // 跳转到订单页面
        goToOrdersPage() {
            this.$router.push('/dashboard/orders');
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/zhuye.scss';

.about-us-content ::v-deep p {
    margin-bottom: 1rem;
    line-height: 1.75;
}

.about-us-content ::v-deep img {
    max-width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Panel Group Style */
.panel-group {
    margin-top: 18px;

    .card-panel-col {
        margin-bottom: 32px;
    }

    .card-panel {
        height: 108px;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
        color: #666;
        background: #fff;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
        border-color: rgba(0, 0, 0, .05);

        &:hover {
            .card-panel-icon-wrapper {
                color: #fff;
            }

            .icon-people {
                background: #40c9c6;
            }

            .icon-message {
                background: #36a3f7;
            }

            .icon-money {
                background: #f4516c;
            }
        }

        .icon-people {
            color: #40c9c6;
        }

        .icon-message {
            color: #36a3f7;
        }

        .icon-money {
            color: #f4516c;
        }

        .card-panel-icon-wrapper {
            float: left;
            margin: 14px 0 0 14px;
            padding: 16px;
            transition: all 0.38s ease-out;
            border-radius: 6px;
        }

        .card-panel-icon {
            float: left;
            font-size: 48px;
        }

        .card-panel-description {
            float: right;
            font-weight: bold;
            margin: 26px;
            margin-left: 0px;

            .card-panel-text {
                line-height: 18px;
                color: rgba(0, 0, 0, 0.45);
                font-size: 16px;
                margin-bottom: 12px;
            }

            .card-panel-num {
                font-size: 20px;
            }
        }
    }
}

@media (max-width:550px) {
    .card-panel-description {
        display: none;
    }

    .card-panel-icon-wrapper {
        float: none !important;
        width: 100%;
        height: 100%;
        margin: 0 !important;

        .svg-icon {
            display: block;
            margin: 14px auto !important;
            float: none !important;
        }
    }
}

/* 基础样式 */
.min-h-screen {
    min-height: 100vh;
}

/* 动画效果 */
@keyframes fade-in-down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-down {
    animation: fade-in-down 0.6s ease-out forwards;
}

/* Swiper样式 */
.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    height: auto;
    padding: 0 10px;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #e2e8f0;
    opacity: 1;
    transition: all 0.3s ease;
    position: relative;
}

.swiper-pagination-bullet::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active::after {
    border-color: #3b82f6;
}

.swiper-pagination-bullet-active {
    background-color: #3b82f6;
    transform: scale(1.2);
}

.swiper-pagination-about-us .swiper-pagination-bullet {
    background-color: #60a5fa;
    /* A slightly different color for distinction */
}

.swiper-pagination-about-us .swiper-pagination-bullet-active {
    background-color: #2563eb;
}

/* 按钮样式 */
.rounded-button {
    border-radius: 0.75rem;
}

/* 卡片悬停效果 */
.hover-scale {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-scale:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 文本渐变效果 */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/* 图标悬停效果 */
.icon-hover {
    transition: all 0.3s ease;
}

.icon-hover:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
    main {
        padding-top: 2rem;
    }
}

/* 关于我们样式 */
.about-us-swiper {
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #cbd5e0;
    opacity: 1;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: #3b82f6;
    transform: scale(1.2);
}

/* 图片错误处理样式 */
img {
    background-color: #f3f4f6;
    object-fit: cover;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .about-us-swiper {
        padding-bottom: 30px;
    }

    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }
}

/* Modal fade transition */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active in <2.1.8 */
    {
    opacity: 0;
}

/* 卡片头部 */
.card-header {
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

/* 表单样式 */
.prediction-form {
    padding: 0 10px;
}

.form-item-enhanced {
    margin-bottom: 25px;
}

.form-item-enhanced :deep(.el-form-item__label) {
    font-weight: 500;
    color: #606266;
    padding-bottom: 8px;
}

/* 按钮样式 */
.action-item {
    margin-top: 5px;
    margin-bottom: 0;
}

.predict-btn {
    width: 100%;
    padding: 10px 0;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* 结果展示区 */
.result-container {
    margin-top: 25px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 4px solid #409EFF;
    animation: fadeIn 0.5s;
}

.result-label {
    font-size: 14px;
    color: #909399;
    margin-bottom: 8px;
}

.price-display {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.price-value {
    font-size: 28px;
    font-weight: 700;
    color: #409EFF;
    line-height: 1.2;
}

.price-unit {
    font-size: 16px;
    color: #606266;
}

.result-footer {
    margin-top: 12px;
    font-size: 12px;
    color: #909399;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
